<template>
  <div>
    <!-- 客户详情以及修改 -->
    <div class="bigbox" v-if="bool">
      <!-- 头部 -->
      <ul class="u2">
        <li>
          <van-icon name="arrow-left" @click="$router.go(-1)" />
        </li>
        <li>
          客户详情
        </li>
        <li>
          <van-icon name="wap-home-o" @click="$router.push('/home')" />
        </li>
      </ul>
      <ul class="u3">
        <li class="li1">
          <img src="../assets/用户列表切图/头像.png" alt="" />
        </li>
        <li class="li2">
          {{data.custName}}
        </li>
        <li class="li3" @click="bool=false">
          <span class="span1">
            <van-icon name="records" />
          </span>
          <span>编辑信息</span>
        </li>
      </ul>
      <div class="under">
        <div class="underbox">
          <van-icon name="todo-list" color="#ffcc33" />
          <span>基本信息</span>
        </div>
        <!-- 列表 -->
        <ul>
          <li>
            <span class="span1">客户名称</span>
            <span>{{data.custName}}</span>
          </li>
          <li>
            <span class="span1">联系电话</span>
            <span>
              <a href="#">{{data.telephone}}</a>
            </span>
          </li>
          <li>
            <span class="span1">学历</span>
            <span>{{data.education}}</span>
          </li>
          <li>
            <span class="span1">性别</span>
            <span>{{data.sex}}</span>
          </li>
          <li>
            <span class="span1">年龄</span>
            <span>{{data.age}}</span>
          </li>
          <li>
            <span class="span1">所属城市</span>
            <span>{{data.cityName}}</span>
          </li>
           <li>
            <span class="span1">公司名称</span>
            <span>{{data.company}}</span>
          </li>
          <li>
            <span class="span1">职位</span>
            <span>{{data.position}}</span>
          </li>
          <li>
            <span class="span1">录入时间</span>
            <span>{{data.createTime}}</span>
          </li>
        </ul>
      </div>
    </div>
  <BianjiUser v-else :data="data" @chan="chan"/>
  </div>
</template>

<script>
import {GetCustMessxiang} from "@/request/api"
import BianjiUser from "./BianjiUser"
export default {
  data() {
    return {
      data : [],
      bool : true
    };
  },
  created(){
    GetCustMessxiang({
      id : this.$route.query.id
    }).then(res=>{
      this.data = res.data
    })
  },
  methods : {
    jump3(){
      let id = this.$route.query.id
      let custname = this.data.custName
      let telephone = this.data.telephone
      this.$router.push(`/bianjiUser?id=${id}&custName=${custname}&telephone=${telephone}`)
    },
    chan(){
      this.bool = true
    }
  },
  components : {
    BianjiUser
  },
};
</script>
 
<style lang = "less" scoped>
.bigbox {
  padding: 0.133333rem 0.066667rem;
  box-sizing: border-box;
  background-color: #003399;
  height: 2rem;
  color: #fff;
  .u2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .van-icon {
      font-size: 0.24rem;
    }
  }
  .u3 {
    width: 100%;
    display: flex;
    .li1 {
      width: 20%;
      position: relative;
      img {
        position: absolute;
        width: 0.58rem;
        top: 0.163333rem;
        right: 0;
      }
    }
    .li2 {
      margin-top: 0.366667rem;
      margin-left: 0.2rem;
    }
    .li3 {
      margin-top: 0.366667rem;
      width: 1rem;
      height: 0.266667rem;
      line-height: 0.266667rem;
      border-radius: 0.266667rem 0 0 0.266667rem;
      padding-left: 0.133333rem;
      background: rgba(255, 255, 255, 0.3);
      position: absolute;
      right: 0;
      .span1 {
        vertical-align: -0.016667rem;
      }
    }
  }
  .under {
    background-color: #fff;
    width: 98%;
    margin: 0.333333rem auto 0;
    height: 5.993333rem;
    background: url("../assets/用户列表切图/底纹.png") no-repeat center center;
    background-size: cover;
    position: relative;
    padding: 0.433333rem 0.2rem;
    box-sizing: border-box;
    overflow: hidden;
    .underbox {
      position: absolute;
      z-index: 999;
      color: #000;
      width: 90%;
      border-bottom: 1px dashed #eee;
      padding-bottom: 0.266667rem;
      .van-icon {
        vertical-align: -0.076667rem;
        margin-right: 0.066667rem;
        font-size: 0.266667rem;
      }
      span {
        font-weight: 700;
        font-size: 0.186667rem;
      }
    }
    ul{
      position: absolute;
      z-index: 999;
      color: #000;
      top: 20%;
      li{
        line-height: .4rem;
        display: flex;
        .span1{
          width: .266667rem;
          width: 0.7rem;
          text-align: right;
          margin-right: .133333rem;
          color: #999999;
        }
      }
    }
  }
}
</style>